<template>
  <el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" :show-checkbox=true node-key="catId">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)">
          展开
        </el-button>
        <el-button v-if="node.childNodes.length == 0" type="text" size="mini" @click="() => remove(node, data)">
          删除
        </el-button>
      </span>
    </span>
  </el-tree>
</template>
<script>
  // 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
  // 例如: import《组件名称》from'《组件路径》';
  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data() {
      return {
        menus: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        append(data) {
        },

        remove(node, data) {
        }
      };
    },
    // 计算属性类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法的集合
    methods: {
      getMenus() {
        this.$http({
          url: this.$http.adornUrl('/product/category/list/tree'),
          method: 'get'
        }).then(({data}) => {
          console.log('成功获取商品菜单数据---', data.data);
          this.menus = data.data;
        });
      }
    },
    // 生命周期-创建完成(可以访问当前this实例
    created() {
      this.getMenus();
    },
    // 生命周期-挂载完成(可以访问poM元素
    mounted() {
    },
    // 生命周期-创建之前
    beforeCreate() {
    },
    // 生命周期-挂载之前
    beforeMount() {
    },
    // 生命周期-更新之前
    beforeUpdate() {
    },
    // 生命周期-更新之后
    updated() {
    },
    // 生命周明-销毁之前
    beforeDestroy() {
    },
    // 生命周期-销毁完成
    destroyed() {
    },
    // 如果页面有keep- alive缓存功能,这个函数会触发
    activated() {
    }
  };
</script>
<style scoped></style>
